<template>
  <div class="box">
    <div id="header">
      <router-link to="/edituser">
        <van-icon name="setting-o" style="line-height:.4rem;float:right;"/>
      </router-link>
      <div class="usershow">
        <van-skeleton
           title
           avatar
           :row="3"
           :loading="loading"
         >
         <div>
           <div class="avatar">
            <van-image
              round
              width="65"
              height="65"
              :src='avatar'
            />
           </div>
          <div class="information">
            <p style="color:#30d2bd;">{{nickname}}
              <span v-if="sex === 1">先生</span>
              <span v-else>女士</span>
            </p>
            <p style="color:#999;">账号ID:{{userid}}</p>
          </div>
         </div>
       </van-skeleton>
      </div>
    </div>
    <div class="content">
      <div class="usernav">
        <div class="myorder">
          <h1>我的订单</h1>
          <div @click="toOrder(0)">
            <i>全部订单<van-icon name="arrow" style="line-height:.4rem;"/></i>
          </div>
        </div>
        <van-grid column-num="5" :border="false">
         <van-grid-item @click="index<3?toOrder(index + 1):addLink(index)"  v-for="(item,index) of list" :key="index">
           <span :class="addIcon(index)" style="font-size:.24rem;color:#3ed5f0;"></span>
           <p style="font-size:.12rem;">{{item.name}}</p>
         </van-grid-item>
       </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridItem, Icon, Uploader, Image, Skeleton } from 'vant'
import { getuserinfo } from '@/api'
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Icon)
Vue.use(Uploader)
Vue.use(Image)
Vue.use(Skeleton)
export default {
  data () {
    return {
      list: [
        { pic: 'icon-daifukuan', name: '待付款' },
        { pic: 'icon-daifahuo', name: '待发货' },
        { pic: 'icon-daishouhuo', name: '待收货' },
        { pic: 'icon-pingjia-tianchong', name: '评价', link: 'taking' },
        { pic: 'icon-shouhou', name: '退换/售后', link: 'Aftermarket' }
      ],
      loading: true,
      avatar: '',
      nickname: '',
      userid: '',
      date: '',
      sex: ''
    }
  },
  mounted () {
    this.loading = false
    if (localStorage.getItem('userid')) {
      getuserinfo({
        userid: localStorage.getItem('userid'),
        token: localStorage.getItem('token')
      }).then(res => {
        if (res.data.code === '1908110') {
          this.$router.push('/login')
        } else {
          this.nickname = res.data.data.nickname
          this.avatar = res.data.data.avatar
          this.userid = (res.data.data.userid).slice(34)
          this.sex = res.data.data.sex
          this.date = res.data.data.date
        }
      })
    } else {
      this.$router.push('/login')
    }
  },
  methods: {
    toOrder (active) {
      this.$router.push({ path: '/allorder/' + 'active=' + active })
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    // 循环依次添加图标
    addIcon (index) {
      return 'iconfont ' + (this.list[index].pic)
    },
    // 依次添加导航
    addLink (index) {
      this.$router.push({ path: '/' + this.list[index].link })
    }
  }
}
</script>

<style lang="scss" scoped >
#header {
  background-image: linear-gradient(0deg,#40d3fd,#37ddc8),linear-gradient(#aaa,#aaa);
  height:.95rem;
  padding: 0 .2rem;
}
// 个人信息显示
.usershow {
    height: .6rem;
    background-color: #ffffff;
    box-shadow: 0 0 0.07rem 0 rgba(200,194,194,.75);
    border-radius: .1rem;
    position: relative;
    bottom:-.39rem;
}
// 需求栏
.usernav {
    height: 1.3rem;
    background-color: #ffffff;
    box-shadow: 0 0 0.07rem 0 rgba(200,194,194,.75);
    border-radius: .12rem;
    /* display: flex;
    justify-content: space-around; */
    margin: .4rem .1rem;
    .myorder {
      height: .4rem;
      line-height: .4rem;
      margin: 0 .15rem;
      border-bottom: .013333rem solid #e6e6e6;
      display: flex;
      justify-content: space-between;
      h1 {
        font-size: .16rem;
        color: #222;
        font-weight: normal;
        // display: inline-block;
      }
      i {
        color: #999;
        float: right;
        font-size: .12rem;
      }
    }
}
.avatar {
  float: left;
  margin-top:-.2rem;
  margin-left: .15rem;
}
.information {
  float: left;
  margin-top:.1rem;
  margin-left: .15rem;
  line-height: .2rem;
  font-size: .12rem;
}
</style>
